<!-- k线 -->
<template>
  <div>
    <!-- content -->
    <div class="k_content">
      <div id="kline_lazhu" class="k"><div style="color: #fff;">数据正在加载 请稍后...</div></div>
      <div class="k_content_bottom">
        <div class="k_content_left">
          <div class="k_left_box">
            <span>最高</span>
            <span :class="((ticket[select.code2] && ticket[select.code2].wave) || 0) <= 0 ? 'up' : 'down'">
              {{ ((ticket[select.code2] && ticket[select.code2].high) || 0).toFixed(select.digit) || '--' }}
            </span>
            <span></span>
          </div>
          <div class="k_left_box">
            <span>最低</span>
            <span :class="((ticket[select.code2] && ticket[select.code2].wave) || 0) <= 0 ? 'up' : 'down'">
              {{ ((ticket[select.code2] && ticket[select.code2].low) || 0).toFixed(select.digit) || '--' }}
            </span>
            <span></span>
          </div>
          <div class="k_left_box">
            <span>持仓量</span>
            <span>{{ ((ticket[select.code2] && ticket[select.code2].position) || 0).toFixed(select.digit) || '--' }}</span>
            <span></span>
          </div>
        </div>
        <div class="k_bottom_right" style="width:50%;height:100%;color: #fff;">
          <p :class="((ticket[select.code2] && ticket[select.code2].wave) || 0) <= 0 ? 'up' : 'down'">
            {{ ((ticket[select.code2] && ticket[select.code2].price) || 0).toFixed(select.digit) || '--' }}
          </p>
          <p :class="((ticket[select.code2] && ticket[select.code2].wave) || 0) <= 0 ? 'up' : 'down'">
            {{ ((ticket[select.code2] && ticket[select.code2].wave) || 0).toFixed(select.digit) || '--' }}%
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import echarts from 'echarts';
import kline from '@/kline/kline.js';
import data from '@/kline/tmpdata.js';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示行情 */,
    ticket: state => state.trade.ticket /*, 推送数据 */
  }),
  data() {
    return {
      mychartkline: null,
      klineInterval: null
    };
  },
  watch: {
    select(val) {
      let mychartkline = document.getElementById('kline_lazhu');
      mychartkline.style.width = $('#kline_lazhu').width() + 'px';
      mychartkline.style.height = $('#kline_lazhu').height() + 'px';
      this.mychartkline = echarts.init(mychartkline);
      this.init('6000');
    }
  },
  beforeDestroy() {
    if (this.klineInterval) {
      clearInterval(this.klineInterval);
    }
    this.klineInterval = null;
  },
  mounted() {
    let mychartkline = document.getElementById('kline_lazhu');
    mychartkline.style.width = $('#kline_lazhu').width() + 'px';
    mychartkline.style.height = $('#kline_lazhu').height() + 'px';
    this.mychartkline = echarts.init(mychartkline);
    this.init('6000');
  },
  components: {},
  methods: {
    init(range) {
      var that = this;
      that.klineInterval = setInterval(res => {
        that.rkline(this.select.code, range, true);
      }, 2000);
      this.rkline(this.select.code, range, false);
    },
    rkline(symbol, time, update) {
      symbol = symbol ? symbol : (symbol = this.select.code);
      if (!symbol) {
        symbol = this.select.code;
      }
      this.$get('addons/tf-futures/get-kline/app-kline?symbol=' + symbol + '&range=' + time).then(res => {
        if (res.data.lines.length > 0) {
          if(update){ //  更新K线数据

            var data = kline.splitData(res.data.lines);
            var macd = kline.calcMACD(12, 26, 9, data.datas, 1);
            this.mychartkline.setOption({
              xAxis:{
                data: data.times,
              },
              series: [{
                data: data.datas,
              }]
            });
          }else{
            this.mychartkline.setOption(kline.initKOption(res.data.lines));
          }
        } else {
          if (this.klineInterval) {
            clearInterval(this.klineInterval);
          }
          this.klineInterval = null;
          this.mychartkline.setOption(kline.initKOption(data.knedata0));
        }
      });
    },

  }
};
</script>

<style scoped>
@import url('../../../static/css/popup.css');
.up {
  color: #00ff00;
}
.down {
  color: red;
}
.k_content {
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  background: #000;
}

.k {
  width: 100vw;
  height: calc(100vh - 5rem);
  margin-top: 1rem;
}

.k_content_bottom {
  width: 98%;
  height: 2.5rem;
  margin: 0rem auto;
  border: 1px solid #7d0711;
  display: flex;
  position: fixed;
  bottom: 90px;
  left: 0;
  right: 0;
  background: #000;
}

.k_content_left {
  width: 50%;
  height: 100%;
  border-right: 1px solid #7d0711;
}

.k_left_box {
  width: 100%;
  height: 0.82rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 0.4rem;
  color: #fff;
  letter-spacing: 2px;
  border-bottom: 1px solid #7d0711;
}

.k_bottom_right {
  width: 50%;
  height: 100%;
  color: rgb(255, 255, 255);
  font-size: 0.45rem;
  padding: 0 0.4rem;
  box-sizing: border-box;
  line-height: 1.2rem;
}
</style>
